<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .parent { width: 300px; height: 300px; background: url('images/timg.jpg') no-repeat center center; background-size: cover; border: 1px solid #333; position: relative; overflow: hidden; }.cover { position: absolute; width: 100%; height: 100%; right:-100%; bottom: 0; background: rgba(209, 123, 123, .5); transition: all 1s; transform-origin: left bottom; }.parent:hover .cover{ transform: rotate(-90deg) } </style> </head> <body><div class="parent"> <div class="cover"> </div> </div> </body></html>